<template>
  <div class="comprehensive-project-settings-page">
    <main>
      <div class="header">
        <p class="title">专题设置</p>
        <div class="search-container">
          <div class="btns">
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd"
              >新增</el-button
            >
          </div>
        </div>
      </div>
      <div class="content">
        <div class="project-list">
          <div class="project-item"></div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "add",
      visible: false,
      moduleList: []
    };
  },
  created() {},
  methods: {
    handleAdd() {}
  }
};
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/main";

.comprehensive-project-settings-page {
  width: 100%;
  height: 100%;
  padding: 20px 30px;
  background-color: $baseBg;
  main {
    width: 100%;
    height: 100%;
    padding: 20px;
    background-color: $mainBg;
    .header {
      width: 100%;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 20px;
      .title {
        font-size: 20px;
      }
      .search-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 120px);
      overflow-y: auto;
      .project-list {
        width: 100%;
        height: calc(100% - 60px);
        display: flex;
        justify-content: flex-start;
        .project-item {
          width: calc(33.3% - 20px);
          height: 300px;
          position: relative;
          background: url("../../../assets/images/project/d_bg.jpeg") no-repeat;
          background-size: cover;
          border-radius: 10px;
        }
      }
    }
  }
}
</style>
